<template>
  <view class="file-main" @touchmove.pause.prevent="" @click="close">
    <!-- open -->
    <u-popup class="files" :show="open" mode="bottom" @close="close(1)">
      <!-- :round="30" -->
      <view class="file-box">
        <view class="file-content">
          <slot></slot>
          <view class="close">
            <!-- <u-icon name="close" size="50" @click="close"></u-icon> -->
            <image src="/static/close2.png" mode="scaleToFill" @click="close" />
            <!-- <view>{{ bottomHeight }}</view> -->
          </view>
        </view>
        <!-- :style="{ bottom: `-${bottomHeight}rpx` }" -->
        <view class="file-bg">
          <image class="bg" src="/static/buyBg.png" mode="scaleToFill" />
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  created() {
    this.init()
  },
  data() {
    return {
      open: false,
      bottomHeight: 0,
    }
  },

  methods: {
    async init() {
      uni.getSystemInfo({
        success: (system) => {
          this.bottomHeight = system.safeAreaInsets.bottom * 2
        },
      })
    },
    show() {
      this.open = true
    },
    close(e) {
      // if (e == 1 && !this.maskFun) return
      this.open = false

      this.$emit('watchClose')
    },
  },
  props: {
    direction: {
      type: String,
      default: 'below',
    },
    width: {
      type: Number,
      default: 100,
    },
    height: {
      type: String,
      default: 'fit-content',
    },
    is_close: {
      type: Boolean,
      default: true,
    },
    is_mask: {
      type: Boolean,
      default: true,
    },
    maskFun: {
      type: Boolean,
      default: true,
    },
  },
}
</script>

<style lang="scss" scoped>
.file-main {
  // padding-top: 50rpx;
  .file-box {
    z-index: 1111111111;
    position: relative;
    // height: calc(364rpx * 2);
    width: 750rpx;
    height: 726rpx;
    // height: 100%;
    .file-content {
      position: relative;
      width: 665rpx;
      padding: 0 37rpx;
      box-sizing: border-box;
      // background-color: #fff;
      margin: 0 auto;
      .close {
        position: absolute;
        right: 38rpx;
        top: 38rpx;
        z-index: 1;
        width: 50rpx;
        height: 50rpx;
        image {
          width: 100%;
          height: 100%;
        }
        ::v-deep .u-icon__icon uicon-close {
          color: #000 !important;
        }
      }
    }
    .file-bg {
      position: absolute;
      top: 0;
      left: 0;
      // top: -200rpx;
      width: 750rpx;
      height: 726rpx;
      // height: 625rpx;
      // height: calc(584rpx + 141rpx);
      // height: 1000rpx;
      .bg {
        width: 100%;
        height: 100%;
      }
    }
  }
  ::v-deep .u-popup__content {
    background-color: transparent !important;
  }
  // ::v-deep .u-popup__content__close {
  //   span {
  //     font-size: 50rpx;
  //   }
  // }
}
::v-deep .u-fade-enter-to {
  // z-index: ;
  // background-color: aqua !important;
  // display: none;
}
// ::v-deep .u-popup__content {
//   height: calc(364rpx * 2) !important;
// }
</style>
